<template>
  <view class="ticket">
    <view class="top">
      <view class="search">
        <input type="text" class="input" placeholder="请输入兑换码" />
        <button class="topbut">兑换</button>
      </view>
      <view class="toptit">查看兑换规则</view>
    </view>

    <view class="body">
      <view class="navbox">
        <view
          class="navson"
          :class="{ navsonshow: showson === index }"
          @click="changeson(index)"
          v-for="(item, index) in navlist"
          :key="index"
          >{{ item }}</view
        >
      </view>
      <view class="all" v-if="showson === 0">
        <view class="allson" v-for="(item,index) in alllist" :key="index">
          <view class="alltop">
            <image
              :src="item.img"
              class="topimg"
              mode="widthFix"
            />
            <view class="topfont">
              <view class="toptit">{{item.tit}}</view>
              <view class="toptext">有效期至{{item.time}}</view>
            </view>
          </view>
          <view class="topline"></view>
          <view class="detail">查看详细</view>
        </view>
      </view>

      <view class="two" v-if="showson === 1">
        无数据....
      </view>
      <view class="three" v-if="showson === 2">
        无数据....
      </view>

    </view>
  </view>
</template>


<script setup>
import { ref } from "vue";

const navlist = ref(["全部", "茶饮券", "酒屋券"]);
const showson = ref(0);
const changeson = (index) => {
  showson.value = index;
};
const alllist = ref([{
  img:'../../static/user/ticket1.png',
  tit:'生日免费券',
  time:'2020-06-05 25：55：22',
  url:''
},{
  img:'../../static/user/ticket2.png',
  tit:'生日特调券',
  time:'2020-06-05 25：55：22',
  url:''
},{
  img:'../../static/user/ticket3.png',
  tit:'酒屋特调券',
  time:'2020-06-05 25：55：22',
  url:''
},{
  img:'../../static/user/ticket4.png',
  tit:'茶饮满二增一圈',
  time:'2020-06-05 25：55：22',
  url:''
},{
  img:'../../static/user/ticket1.png',
  tit:'升级好友券',
  time:'2020-06-05 25：55：22',
  url:''
},])
</script>


<style lang="scss">
.ticket {
  width: 100%;
  height: 100vh;
  background-color: #f0f8fa;
  box-sizing: border-box;
  .top {
    width: 100%;
    background-color: #fff;
    padding-top: 30rpx;
    box-sizing: border-box;
    .search {
      width: 77%;
      height: 80rpx;
      margin: auto;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .input {
        width: 70%;
        height: 100%;
        padding: 0 15rpx;
        border: solid 2rpx #f2f2f2;
        font-size: 28rpx;
      }
      .topbut {
        width: 30%;
        height: 100%;
        font-size: 28rpx;
        line-height: 80rpx;
        background-color: #adb838;
        color: #fff;
        border: none;
      }
    }
    .toptit {
      width: 100%;
      text-align: center;
      padding-bottom: 30rpx;
      font-size: 28rpx;
      color: #adb838;
    }
  }
  .body {
    width: 100%;
    .navbox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      .navson {
        width: 33%;
        text-align: center;
      }
      .navsonshow {
        width: 33%;
        text-align: center;
        color: #adb838;
        position: relative;
      }
      .navsonshow::after {
        content: "";
        position: absolute;
        width: 35%;
        height: 5rpx;
        background-color: #adb838;
        bottom: -50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .all {
      width: 94%;
      margin: auto;
      box-sizing: border-box;
      .allson {
        width: 100%;
        padding: 20rpx 35rpx;
        box-sizing: border-box;
        background-color: #fff;
        margin-bottom: 30rpx;
        .alltop{
          width: 100%;
          display: flex;
          align-items: center;
          .topimg{
            width: 27%;
          }
          .topfont{
            width: 70%;
            margin-left: 20rpx;
            .toptit{
              font-size: 32rpx;
            }
            .toptext{
              font-size: 25rpx;
              margin-top: 15rpx;
            }
          }
        }
        .topline{
          width: 100%;
          border-bottom: dashed 2rpx #E3E3E3;
        }
        .detail{
          width: 100%;
          font-size: 28rpx;
          color: #adb838;
          text-align: right;
          margin: 15rpx 0;
        }
      }
    }
  }
}
</style>
